import {  Welcome } from "@ant-design/x";
import { Card, ConfigProvider } from "antd";


const Headers = () => {
  return (
    <div className="sticky top-0 z-10" >
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: "#00b96b",
            borderRadius: 2,
            colorBgContainer: "#f6ffed",
          },
        }}
      >
        <Card style={{ borderRadius: 0 }}>
          <div style={{ position: "relative" }}>
            <Welcome
              icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
              title="Hello,欢迎来到春天的世界！"
              description="很高兴见到你，让我们愉快的开始对话吧~"
              style={{
                backgroundImage:
                  "linear-gradient( 97deg,rgba(224, 245, 242, 0.85) 17%,  rgba(210, 242, 216, 0.75) 51%)",
                borderRadius: 10,
                position: "relative",
                zIndex: 1,
                padding: "1rem",
              }}
              styles={{
                title: { color: "#00b96b" },
              }}
            />
            <div
              style={{
                position: "absolute",
                top: "-10px",
                left: "-10px",
                right: "-10px",
                bottom: "-10px",
                background: "linear-gradient(to right, 	#BCEE68, 		#FFE4B5)",
                borderRadius: 8,
                filter: "blur(10px)",
                zIndex: 0,
              }}
            ></div>
          </div>
        </Card>
      </ConfigProvider>
    </div>
  );
};

export default Headers;
